<template>
  <section class="main">
    <div class="title">
      <span>订单详情</span>
      <div>
      </div>
    </div>
    <div class="container container1">
      <div class="itemBox">
        <div class="line">
          <div>商户名</div>
          <div>{{datas.merchantName}}</div>
        </div>
        <div class="line">
          <div>商户号</div>
          <div>{{datas.merchantNo}}</div>
        </div>
        <div class="line">
          <div>订单号</div>
          <div>{{datas.rentNo}}</div>
        </div>
      </div>
      <div class="itemBox">
     
        <div class="line">
          <div>还款订单号</div>
          <div>{{datas.repayTradeNo}}</div>
        </div>
        <div class="line">
          <div>门店名</div>
          <div>{{datas.shopCode}}</div>
        </div>
         <div class="line">
          <div>门店号</div>
          <div>{{datas.shopName}}</div>
        </div>
      </div>
    </div>
    
     <div class="title">
      <span>支付信息</span>
      <div>
       
      </div>
    </div>
    <div class="container container1">
      <div class="itemBox">
        <div class="line">
          <div>支付类型</div>
          <div>支付宝</div>
        </div>
        <div class="line">
          <div>交易金额</div>
          <div>{{datas.totalFee/100}}</div>
        </div>
         
        <div class="line">
          <div>结算处理时间</div>
          <div>{{datas.settleTime}}</div>
        </div>
      </div>
      <div class="itemBox">
           <div class="line">
          <div>支付方式</div>
          <div>支付宝小程序</div>
        </div>
       
        <div class="line">
          <div>支付宝用户标识</div>
          <div>{{datas.payerUserId}}</div>
        </div>
        <div class="line">
          <div>订单创建时间</div>
          <div>{{datas.createTime}}</div>
        </div>
     
        
      </div>
       <div class="itemBox">
        <div class="line">
          <div>支付状态</div>
          <div class="red" v-if="datas.payStatusCode == 1">未还款</div>
          <div class="green" v-if="datas.payStatusCode == 2">已还款</div>
        </div>
        <div class="line">
          <div>支付费率</div>
          <div>6‰</div>
        </div>
        <div class="line">
          <div>支付完成时间</div>
          <div>{{datas.settleTime}}</div>
        </div>
        
      </div>
    </div>
    <br>

  </section>
</template>

<script>
import {rentTradeget } from "@/api/api";
export default {
  data() {
    return {
     datas:{},
    
    };
  },
  created() {
      console.log(this.$route.query.id)
      this.rentTradeget()
  },
  methods: {
    
    //获取详情
    rentTradeget(){
      rentTradeget({},this.$route.query.id).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else{
          if(res.code == 200){
              this.datas = res.data
          }else{
            this.$message.error(res.message);
          }
        }
      })
    },
  
   
  
 
    
    
  
  },
};
</script>

<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container1 .itemBox {
  width: 50%;
}
.container .itemBox {
  width: 33%;
}
.container1 .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container1 .itemBox .line div:nth-child(1) {
  width: 25%;
  text-align: left;
}
.container1 .itemBox .line div:nth-child(2) {
  width: 75%;
  text-align: left;
  color: #888888;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
 
}
.red {
  color: #f9607d !important;
}
.green{
    color: green !important;
}
.tableBox {
  width: 100%;
}
.el-input{
  width: 70%;
}
.el_tag{
  margin-right: 10px;
  margin-bottom: 5px;
}
.el-tag .el-icon-close{
  color: #fff;
}
</style>
